<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>数据属性速查 Data- attribute reference</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css"/>
<script type="text/javascript" src="../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../images/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />

<div class="content">
  <h1>数据属性速查 Data- attribute reference（点击标题可进入详细介绍页面）</h1>
  <div class="desc">
    <div>Jquery mobile框架使用html5的 data- 属性来使初始化标记和配置组件。这些属性全部都是可选的，并且支持手动调用插件。为了避免命名上的和与其他也使用html5的 data- 属性插件与框架的冲突,可以使用全局设置来自定义命名空间。</div></div>
    <p class="reindent"><a href="../componts/button/basics.html" tppabs="http://www.jqmapi.com/componts/button/basics.html">按钮</a></p>
  <div class="desc">
  <div>通过 <strong>data-role="button" </strong>来标记按钮。基于链接的按钮和表单的button元素会被自动渲染，<strong>无需data-role属性。</strong></div></div> 
  
<table>
				<tbody><tr>
					<th>data-corners</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-icon</th>
					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
				</tr>
				<tr>
					<th>data-iconpos</th>
					<td><strong>left</strong> | right | top | bottom |  notext</td>
				</tr>
				<tr>
					<th>data-iconshadow</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-inline</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-shadow</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>swatch letter (a-z)</td>
				</tr>
			</tbody></table><br>
  <div class="desc">
  <div>多个按钮按钮的情况下，可以给这些按钮的容器添加<strong>data-role="controlgroup"</strong>属性，使这些按钮成为垂直的按钮组。给按钮添加<strong>data-type="horizontal" </strong>属性可以使按钮水平并排排列。</div></div><br />
      <p class="reindent"><a href="../componts/form/Checkboxes.html" tppabs="http://www.jqmapi.com/componts/form/Checkboxes.html">复选框</a></p>
   <div class="desc">
  <div>通过<strong>type="checkbox"</strong>标记的input元素会自动增强，<strong>无需data-role属性。</strong></div></div> 
<table>
				<tbody><tr>
					<th>data-role</th>
					<td>none (防止自动增强)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式(a-z) - 添加到表单元素上</td>
				</tr>
			</tbody></table>
      <p class="reindent"><a href="../componts/formats/Collapsible .html" tppabs="http://www.jqmapi.com/componts/formats/Collapsible .html">可折叠区域</a></p>
   <div class="desc">
  <div>一个标题元素和一个用<strong>data-role="collapsible"</strong>属标记的容器。</div></div> 
<table>
				<tbody><tr>
					<th>data-collapsed</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-content-theme</th>
					<td>主题样式 (a-z)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式 (a-z)</td>
				</tr>
			</tbody></table>
            
     <p class="reindent"><a href="../componts/formats/Accordions.html" tppabs="http://www.jqmapi.com/componts/formats/Accordions.html">手风琴组</a></p> 
   <div class="desc">
  <div>一个标题元素和一个用<strong>data-role="collapsible-set"</strong>属标记的容器。</div></div> 
<table>
				<tbody><tr>
					<th>data-content-theme</th>
					<td>主题样式 (a-z) - Sets all collapsibles in set</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式r (a-z) - Sets all collapsibles in set</td>
				</tr>
			</tbody></table>
     <p class="reindent"><a href="../componts/page/dialogs.html" tppabs="http://www.jqmapi.com/componts/page/dialogs.html">对话框</a></p>
		<div class="desc">
		<div>用<strong>data-role="page"</strong>属性标记的容器或者通过<strong>data-rel="dialog"</strong>标记的链接所指向的容器</div></div>
<table>
				<tbody><tr>
					<th>data-close-btn-text</th>
					<td>string (对话框的关闭按钮的文字)</td>
				</tr>
				<tr>
					<th>data-dom-cache</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-id</th>
					<td>字符串 (页面的ID)</td>
				</tr>
				<tr>
					<th>data-fullscreen</th>
					<td>true | false (used in conjunction with fixed toolbars)</td>
				</tr>
				<tr>
					<th>data-overlay-theme</th>
					<td>主题样式 (a-z) - 页面弹出对话框的时候蒙版的主题</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式 (a-z)</td>
				</tr>
				<tr>
					<th>data-title</th>
					<td>string (此页面显示的时候的标题)</td>
				</tr>
			</tbody></table> 
     <p class="reindent"><a href="../componts/page/Anatomy .html" tppabs="http://www.jqmapi.com/componts/page/Anatomy .html">页面内容</a></p>
		<div class="desc">
		<div>用<strong>data-role="content"</strong>属性标记的容器</div></div>
<table>
				<tbody><tr>
					<th>data-theme</th>
					<td>主题样式 (a-z)</td>
				</tr>
			</tbody></table>
            
     <p class="reindent"><a href="#">Field container</a></p>
		<div class="desc">
		<div>用<strong>data-role="fieldcontain"</strong>属性标记的容器</div></div>
        
     <p class="reindent"><a href="../componts/form/toggle .html" tppabs="http://www.jqmapi.com/componts/form/toggle .html">开关</a></p>
		<div class="desc">
		<div>用<strong>data-role="slider"</strong>属性标记的列表菜单，只能有两个option.</div></div>
<table>
				<tbody><tr>
					<th>data-role</th>
					<td> 无 (防止自动增强l)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式 (a-z) - 给表单元素添加主题样式</td>
				</tr>
				<tr>
					<th>data-track-theme</th>
					<td>主题样式 (a-z) - 给表单元素添加主题样式</td>
				</tr>
			</tbody></table>
     <p class="reindent"><a href="../componts/toolbar/Footer .html" tppabs="http://www.jqmapi.com/componts/toolbar/Footer .html">footer</a></p>
		<div class="desc">
		<div>用<strong>data-role="footer"</strong>属性标记的容器</div></div>
<table>
				<tbody><tr>
					<th>data-id</th>
					<td>字符串 (unique id, useful in persistent footers)</td>
				</tr>
				<tr>
					<th>data-position</th>
					<td>fixed</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式(a-z)</td>
				</tr>
			</tbody></table>
     <p class="reindent"><a href="../componts/toolbar/Header .html" tppabs="http://www.jqmapi.com/componts/toolbar/Header .html">Header</a></p>
		<div class="desc">
		<div>用<strong>data-role="header"</strong>属性标记的容器</div></div> 
<table>
				<tbody><tr>
					<th>data-add-back-btn</th>
					<td>true | <strong>false</strong> (只会在header自动添加后退按钮)</td>
				</tr>
				<tr>
					<th>data-back-btn-text</th>
					<td>字符串</td>
				</tr>
				<tr>
					<th>data-back-btn-theme</th>
					<td>主题样式 (a-z)</td>
				</tr>
				<tr>
					<th>data-position</th>
					<td>fixed</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式 (a-z)</td>
				</tr>
				<tr>
					<th>data-title</th>
					<td>字符串 (title used when page is shown)</td>
				</tr>
			</tbody></table>
     <p class="reindent"><a href="../componts/page/Link .html" tppabs="http://www.jqmapi.com/componts/page/Link .html">链接</a></p>
		<div class="desc">
		<div>链接,包括用<strong>data-role="button"</strong>属性标记的链接，和表单中的</div></div> 
<table>
				<tbody><tr>
					<th>data-ajax</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-direction</th>
					<td>reverse (翻转页面转场效果)</td>
				</tr>
				<tr>
					<th>data-dom-cache</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-prefetch</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-rel</th>
					<td>back (后退到上一个历史的记录的页面)<br>
						dialog (打开对话框，不记录进历史记录中)<br>
						external (for linking to another domain)</td>
				</tr>
				<tr>
					<th>data-transition</th>
					<td><strong>slide</strong> | slideup | slidedown | pop | fade | flip</td>
				</tr>
			</tbody></table>
            
     <p class="reindent"><a href="#">列表</a></p>
		<div class="desc">
		<div>用<strong>data-role="listview"</strong>属性标记的ol或ul</div></div>
<table>
				<tbody><tr>
					<th>data-count-theme</th>
					<td>主题样式(a-z)</td>
				</tr>
				<tr>
					<th>data-dividertheme</th>
					<td>主题样式(a-z)</td>
				</tr>
				<tr>
					<th>data-filter</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-filter-placeholder</th>
					<td>string</td>
				</tr>
				<tr>
					<th>data-filter-theme</th>
					<td>主题样式(a-z)</td>
				</tr>
				<tr>
					<th>data-inset</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-split-icon</th>
					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式(a-z)</td>
				</tr>
			</tbody></table>
            
     <p class="reindent"><a href="../componts/form/Select .html" tppabs="http://www.jqmapi.com/componts/form/Select .html">列表项</a></p>
		<div class="desc">
		<div>列表中的li</div></div>
<table>
				<tbody><tr>
					<th>data-icon</th>
					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
				</tr>
				<tr>
					<th>data-role</th>
					<td>list-divider</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式(a-z) - can also be set on individual LIs</td>
				</tr>
			</tbody></table>
     <p class="reindent"><a href="../componts/page/Anatomy .html" tppabs="http://www.jqmapi.com/componts/page/Anatomy .html">页面</a></p>
		<div class="desc">
		<div>用<strong>data-role="page"</strong>属性标记的容器</div></div>
<table>
				<tbody><tr>
					<th>data-close-btn-text</th>
					<td>string (对话框的关闭按钮的文字)</td>
				</tr>
				<tr>
					<th>data-dom-cache</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-id</th>
					<td>string (页面的唯一id)</td>
				</tr>
				<tr>
					<th>data-fullscreen</th>
					<td>true | false (used in conjunction with fixed toolbars)</td>
				</tr>
				<tr>
					<th>data-overlay-theme</th>
					<td>主题样式 (a-z) - overlay theme when the page is opened in a dialog</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式 (a-z)</td>
				</tr>
				<tr>
					<th>data-title</th>
					<td>string (页面显示的时候的标题)</td>
				</tr>
			</tbody></table>
     <p class="reindent"><a href="../componts/form/Radio.html" tppabs="http://www.jqmapi.com/componts/form/Radio.html">单选按钮</a></p>
		<div class="desc">
		<div>用<strong>data-role="header"</strong>属性标记的容器</div></div>
 <table>
				<tbody><tr>
					<th>data-role</th>
					<td>none (防止自动增强)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式 (a-z) - Added to the form element</td>
				</tr>
			</tbody></table>
     <p class="reindent"><a href="../componts/form/Select .html" tppabs="http://www.jqmapi.com/componts/form/Select .html">列表菜单</a></p>
		<div class="desc">
		<div><strong>select</strong>的列表菜单会被自动增强，无需data-role属性。</div></div>
        
<table>
				<tbody><tr>
					<th>data-icon</th>
					<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
				</tr>
				<tr>
					<th>data-iconpos</th>
					<td><strong>left</strong> | right | top | bottom |  notext</td>
				</tr>
				<tr>
					<th>data-inline</th>
					<td>true | <strong>false</strong></td>
				</tr>
				<tr>
					<th>data-native-menu</th>
					<td><strong>true</strong> | false</td>
				</tr>
				<tr>
					<th>data-overlay-theme</th>
					<td>主题样式 (a-z) - 蒙版的主题样式</td>
				</tr>
				<tr>
					<th>data-placeholder</th>
					<td>true | false - 加到option上</td>
				</tr>
				<tr>
					<th>data-role</th>
					<td>none (防止自动增强)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式(a-z) - 加到表单元素上</td>
				</tr>	
			</tbody></table>
     <p class="reindent"><a href="../componts/form/Slider.html" tppabs="http://www.jqmapi.com/componts/form/Slider.html">划杆</a></p>
		<div class="desc">
		<div><strong>type="range"</strong>属性标记的input元素会被自动增强，无需data-role属性</div></div>
<table>
				<tbody><tr>
					<th>data-role</th>
					<td>none (防止自动更新)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式 (a-z) - 加到表单元素上</td>
				</tr>
				<tr>
					<th>data-track-theme</th>
					<td>主题样式 (a-z) - 加到表单元素上</td>
				</tr>
			</tbody></table>
     <p class="reindent"><a href="../componts/form/Text.html" tppabs="http://www.jqmapi.com/componts/form/Text.html">文本框和文本域</a></p>
		<div class="desc">
		<div>type="text|number|search|等."类型的文本框或者文本域会自动增强，无需data-role属性</div></div>
     
<table>
				<tbody><tr>
					<th>data-role</th>
					<td>none (防止自动更新l)</td>
				</tr>
				<tr>
					<th>data-theme</th>
					<td>主题样式(a-z) - 加到表单元素上</td>
				</tr>
			</tbody></table>
         
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



